<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制造业智能分析系统 - 移动端原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            background-color: #f0f2f5;
        }
        .prototype-container {
            width: 430px; /* iPhone 16 Pro Max width */
            height: 932px; /* iPhone 16 Pro Max height */
            border-radius: 55px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            background: white;
        }
        .status-bar {
            height: 44px;
            background: #000;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            font-size: 14px;
        }
        .nav-bar {
            height: 50px;
            background: #fff;
            border-top: 1px solid #eee;
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            font-size: 12px;
        }
        .nav-item.active {
            color: #1677ff;
        }
        .nav-item i {
            font-size: 20px;
            margin-bottom: 2px;
        }
        iframe {
            width: 100%;
            height: calc(100% - 94px);
            border: none;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-8">
    <div class="prototype-container">
        <!-- Status Bar -->
        <div class="status-bar">
            <span>9:41</span>
            <div class="flex items-center space-x-2">
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>
        
        <!-- Content Area -->
        <iframe id="contentFrame" src="pages/dashboard.html"></iframe>
        
        <!-- Navigation Bar -->
        <div class="nav-bar">
            <a href="#" class="nav-item active" onclick="changeFrame('pages/dashboard.html', this)">
                <i class="fas fa-chart-line"></i>
                <span>生产监控</span>
            </a>
            <a href="#" class="nav-item" onclick="changeFrame('pages/yield.html', this)">
                <i class="fas fa-percentage"></i>
                <span>良率分析</span>
            </a>
            <a href="#" class="nav-item" onclick="changeFrame('pages/equipment.html', this)">
                <i class="fas fa-cogs"></i>
                <span>设备维护</span>
            </a>
            <a href="#" class="nav-item" onclick="changeFrame('pages/data-integration.html', this)">
                <i class="fas fa-database"></i>
                <span>数据集成</span>
            </a>
            <a href="#" class="nav-item" onclick="changeFrame('pages/system.html', this)">
                <i class="fas fa-cog"></i>
                <span>系统设置</span>
            </a>
        </div>
    </div>

    <script>
        function changeFrame(url, element) {
            document.getElementById('contentFrame').src = url;
            // Update active state
            document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
            element.classList.add('active');
        }
    </script>
</body>
</html> 